<template>
	
<cos-header title="导航栏组件891" fixed="true" ></cos-header>
		<!-- <view style="margin-top: 160rpx;"></view> -->
	
  <view class="container">
    <!-- 页面内容 -->
    <view class="store-details">
		
		
		<view class="shop-images" >
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<!-- <swiper-item>
							<image
								src="https://ts2.tc.mm.bing.net/th?id=OIP-C.lDfOKS5y39K8aLJkWFupaQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
								class="shop-image" />
						</swiper-item>
						<swiper-item>
							<image
								src="https://ts3.tc.mm.bing.net/th?id=OIP-C.k2KztkfTEVlzAoUWZ4jr7gHaDu&w=349&h=176&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
								class="shop-image" />
						</swiper-item>
						<swiper-item>
							<image
								src="https://ts1.tc.mm.bing.net/th?id=OIP-C.QUm10Q5WB7kq7DoOGF27kAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
								class="shop-image" />
						</swiper-item> -->
						
						<swiper-item v-for="(image, index) in images" :key="index">
						      <image :src="image.url" class="shop-image" />
						    </swiper-item>
							
					</swiper>
				</view>
		
		
      <!-- 门店图片和其他信息 -->
      <!-- <view class="store-image"> -->
        <!-- 图片占位符 -->
      <!-- </view> -->
      <view class="store-info">
        <view class="store-name">伟业汽车维修厂(人民路店)</view>
        <view class="store-rating">
          <uni-rate :value="3" readonly />
          <text>3分</text>
          <text>销量：322</text>
        </view>
        <view class="store-time">营业时间：周一至周五 09:00-22:00</view>
        <view class="store-address">山阳区人民中路32号</view>
      </view>

      <!-- 服务列表 -->
      <view class="services">
        <view class="service-title">服务</view>
		
        <view class="service-item">
          <checkbox-group @change="onServiceChange">
            <label>
              <checkbox value="service1" />小保养套餐1（合成机油+机滤）
            </label>
            <view class="service-price">
              <text>¥ 199</text>
              <text class="original-price">¥ 299</text>
            </view>
          </checkbox-group>
        </view>
		
		
      </view>

      <!-- 服务评价 -->
      <view class="service-reviews">
        <view class="reviews-title">服务评价</view>
        <view class="review-item">
          <view class="reviewer-info">
            <view class="reviewer-avatar">
              <!-- 用户头像占位符 -->
            </view>
            <view class="reviewer-name">李**</view>
            <view class="review-date">2022-09-10</view>
          </view>
          <view class="review-rating">
            <uni-rate :value="4" readonly />
          </view>
          <view class="review-content">服务评价内容服务评价内容服务评价内容...</view>
        </view>
      </view>

      <!-- 底部操作栏 -->
      <view class="bottom-bar">
        <view class="cart-button" @click="toggleCart">
          购物车({{ cartItemCount }})
        </view>
        <view class="confirm-button" @click="confirmSelected" >确认已选服务</view>
      </view>

      <!-- 购物车内容弹出层 -->
      <view class="cart-content" v-if="showCart">
        <view class="cart-title">服务订单</view>
        <view class="cart-items">
          <view class="cart-item" v-for="(item, index) in cartItems" :key="index">
            <checkbox :checked="item.checked" @click="toggleCartItem(index)" />
            <text>{{ item.name }}</text>
            <text class="item-price">¥ {{ item.price }}</text>
          </view>
        </view>
        <view class="cart-total">
          <text>合计： ¥ {{ totalAmount }}</text>
        </view>
        <!-- <view class="cart-actions">
          <button class="confirm-selected" @click="confirmSelected">确认已选服务</button>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
// import uniRate from '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue';

// 是否显示购物车内容
const showCart = ref(false);
 const images=ref([
      {
        url: 'https://ts2.tc.mm.bing.net/th?id=OIP-C.lDfOKS5y39K8aLJkWFupaQHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'
      },
      {
        url: 'https://ts3.tc.mm.bing.net/th?id=OIP-C.k2KztkfTEVlzAoUWZ4jr7gHaDu&w=349&h=176&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'
      },
      {
        url: 'https://ts1.tc.mm.bing.net/th?id=OIP-C.QUm10Q5WB7kq7DoOGF27kAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'
      }
    ])

// 购物车中的项目
const cartItems = ref([
  { name: '日式水晶打蜡', price: 199, unprice:299, checked: true },
  { name: '车身去氧化', price: 199,unprice:299, checked: false },
  { name: '轮胎补气', price: 199,unprice:299, checked: false },
]);

// 切换购物车显示状态
const toggleCart = () => {
  showCart.value = !showCart.value;
};

// 切换购物车中的项目选中状态
const toggleCartItem = (index: number) => {
  cartItems.value[index].checked = !cartItems.value[index].checked;
};

// 处理服务选择变化
const onServiceChange = (e: any) => {
  console.log('服务选择变化', e);
};

// 确认已选服务
const confirmSelected = () => {
  const selectedItems = cartItems.value.filter(item => item.checked);
  console.log('确认已选服务:', selectedItems);
  uni.navigateTo({
  	url:"/packageIndex/car-service/car-service-order/car-service-order"
  })
};

// 计算购物车中已选中的项目数量
const cartItemCount = computed(() => {
  return cartItems.value.filter(item => item.checked).length;
});

// 计算购物车中已选中项目的总价
const totalAmount = computed(() => {
  return cartItems.value
    .filter(item => item.checked)
    .reduce((sum, item) => sum + item.price, 0);
});
</script>

<style>
/* 样式部分 */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.store-details {
  flex: 1;
  overflow-y: auto;
}

.store-image {
  width: 100%;
  height: 240px;
  background-color: #f0f0f0;
  margin-bottom: 10px;
}

.store-info {
  padding: 10px;
}

.store-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.store-time,
.store-address {
  margin-bottom: 5px;
}


.shop-images {
		width: 100%;
		height: 400rpx;
	}

	.swiper {
		width: 100%;
		height: 100%;
	}

	.shop-image {
		width: 100%;
		height: 100%;
	}


.services {
  padding: 10px;
  margin-top: 10px;
}

.service-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.service-price {
  color: red;
}

.original-price {
  text-decoration: line-through;
  color: gray;
  margin-left: 5px;
}

.service-reviews {
  padding: 10px;
  margin-top: 10px;
}

.reviews-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.reviewer-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 10px;
}

.reviewer-name {
  font-weight: bold;
}

.review-date {
  margin-left: auto;
  color: gray;
}

.review-rating {
  margin-bottom: 5px;
}

.review-content {
  line-height: 1.5;
}

.bottom-bar {
  display: flex;
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
}

.cart-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ff5a5f;
  color: white;
  font-weight: bold;
}

.confirm-button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffc800;
  color: white;
  font-weight: bold;
}

.cart-content {
  position: fixed;
  bottom: 50px;
  width: 100%;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
}

.cart-title {
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #f0f0f0;
}

.cart-items {
  padding: 10px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-price {
  color: red;
}

.cart-total {
  padding: 10px;
  text-align: right;
  font-weight: bold;
}

.cart-actions {
  padding: 10px;
  display: flex;
  justify-content: flex-end;
}

.confirm-selected {
  background-color: #ffc800;
  color: white;
  border: none;
  padding: 5px 15px;
  border-radius: 5px;
}
</style>